Angular Material এর Drag and Drop কম্পোনেন্ট ব্যবহার করে আপনি সহজেই উপাদানগুলোকে ড্র্যাগ এবং ড্রপ করতে পারেন, যা অ্যাপ্লিকেশনের ইন্টারঅ্যাক্টিভিটি বাড়ায়। এটি বিভিন্ন ধরনের অ্যাপ্লিকেশন যেমন তালিকা পুনর্বিন্যাস (reordering lists), ড্র্যাগ-এন্ড-ড্রপ ফাইল আপলোড, এবং আরও অনেক কাস্টম ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়।

Angular Material এর MatDragDropModule এই ফিচারটি প্রদান করে, যা খুব সহজেই বিভিন্ন UI উপাদানকে ড্র্যাগ এবং ড্রপ করতে সক্ষম করে।

ড্র্যাগ এবং ড্রপ ব্যবহার করার ধাপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে MatDragDropModule ইমপোর্ট করতে হবে, যা Angular Material এর ড্র্যাগ এবং ড্রপ ফিচার ব্যবহারের জন্য প্রয়োজনীয়।

import { MatDragDropModule } from '@angular/material/drag-drop';

@NgModule({
  imports: [
    MatDragDropModule
  ]
})
export class AppModule { }

২. ড্র্যাগ এবং ড্রপ ফিচার ব্যবহার করা

এখন, HTML ফাইলে ড্র্যাগ এবং ড্রপ ফিচার ব্যবহার করা যাবে। এটি সাধারণত mat-list বা mat-grid কম্পোনেন্টের সাথে কাজ করে।

উদাহরণ: ড্র্যাগ এবং ড্রপ তালিকা

<div
  cdkDropList
  [cdkDropListData]="items"
  (cdkDropListDropped)="drop($event)"
  class="example-list"
>
  <div *ngFor="let item of items" cdkDrag class="example-box">
    {{ item }}
  </div>
</div>

এখানে:

• cdkDropList: এটি ড্রপ করার জন্য এলিমেন্টটি চিহ্নিত করে।
• cdkDrag: এটি এলিমেন্টকে ড্র্যাগযোগ্য করে তোলে।
• cdkDropListData: এটি ড্র্যাগড এলিমেন্টের ডাটা সংরক্ষণ করে, যেমন তালিকা আইটেম।
• (cdkDropListDropped): এটি ড্রপ ইভেন্টটি হ্যান্ডেল করে, যেখানে ড্র্যাগড আইটেমের নতুন অবস্থান পাওয়া যায়।

TypeScript ফাইলে ড্রপ ইভেন্ট হ্যান্ডলিং

import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop',
  templateUrl: './drag-drop.component.html',
  styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent {
  items = ['Apple', 'Banana', 'Orange', 'Pineapple'];

  drop(event: CdkDragDrop<string[]>) {
    const previousIndex = this.items.findIndex(item => item === event.item.data);
    moveItemInArray(this.items, previousIndex, event.currentIndex);
  }
}

এখানে:

• moveItemInArray: এটি Angular CDK থেকে একটি ফাংশন, যা ড্র্যাগ করা আইটেমকে নতুন অবস্থানে স্থানান্তরিত করে।
• CdkDragDrop: এটি ড্র্যাগ এবং ড্রপ ইভেন্টের ডাটা হ্যান্ডেল করতে ব্যবহৃত হয়।

৩. ড্র্যাগ এবং ড্রপ স্টাইলিং

ড্র্যাগ এবং ড্রপ এলিমেন্টের স্টাইল পরিবর্তন করতে CSS বা SCSS ব্যবহার করা যায়। উদাহরণস্বরূপ:

.example-list {
  width: 300px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 200px;
  display: block;
}

.example-box {
  padding: 10px;
  margin: 10px;
  border: solid 1px #ccc;
  background: #f0f0f0;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
}

এখানে, example-list এবং example-box ক্লাসে ড্র্যাগ এবং ড্রপ এলিমেন্টের স্টাইলিং করা হয়েছে।

ড্র্যাগ এবং ড্রপ ফিচারের অন্যান্য বৈশিষ্ট্য

১. ড্র্যাগ এলিমেন্টের দৃশ্যমান স্টাইল

ড্র্যাগ করা আইটেমের জন্য cdkDragPreview ডিরেকটিভ ব্যবহার করে কাস্টম প্রিভিউ তৈরি করা যায়।

<div cdkDrag [cdkDragPreview]="previewTemplate">
  <div>{{ item }}</div>
</div>

<ng-template #previewTemplate>
  <div class="custom-preview">Custom Preview</div>
</ng-template>

এখানে, ড্র্যাগ করা আইটেমের জন্য একটি কাস্টম প্রিভিউ তৈরি করা হয়েছে।

২. ড্র্যাগ ইভেন্ট কাস্টমাইজেশন

ড্র্যাগ এবং ড্রপ ইভেন্ট কাস্টমাইজ করতে cdkDragStarted এবং cdkDragEnded ইভেন্ট হ্যান্ডল করতে পারেন।

<div cdkDrag (cdkDragStarted)="onDragStarted()" (cdkDragEnded)="onDragEnded()">
  <div>{{ item }}</div>
</div>

onDragStarted() {
  console.log('Drag started');
}

onDragEnded() {
  console.log('Drag ended');
}

৩. ড্রপ এন্ড কাস্টম পজিশন

ড্র্যাগ এবং ড্রপ ফিচারের জন্য পজিশন কাস্টমাইজ করা যায়। cdkDropList এর মাধ্যমে আপনি ড্র্যাগড আইটেমটি কোন জায়গায় ড্রপ করতে পারবেন তা নিয়ন্ত্রণ করতে পারেন।

<div cdkDropList [cdkDropListConnectedTo]="['list2']">
  <!-- Your drop list content -->
</div>

<div id="list2" cdkDropList [cdkDropListConnectedTo]="['list1']">
  <!-- Another drop list content -->
</div>

এখানে, দুটি ড্রপ লিস্ট একে অপরের সাথে কানেক্ট করা হয়েছে।

Angular Material এর ড্র্যাগ এবং ড্রপ ফিচার ব্যবহার করে আপনি সহজেই ইন্টারঅ্যাকটিভ, ডাইনামিক ইউআই তৈরি করতে পারেন। এর মাধ্যমে আপনি তালিকা পুনর্বিন্যাস, আইটেম স্থানান্তর, এবং আরও অনেক ধরনের ড্র্যাগ-এন্ড-ড্রপ ইন্টারঅ্যাকশন তৈরি করতে পারবেন। MatDragDropModule এবং cdkDragDrop ডিরেকটিভ ব্যবহার করে ড্র্যাগ এবং ড্রপ কম্পোনেন্টের কার্যকারিতা বাড়ানো যায় এবং কাস্টমাইজ করা যায়।

Angular Material এর Drag and Drop ফিচার ব্যবহার করে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে একটি ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য উপযোগী ড্র্যাগ এবং ড্রপ ফিচার সহজেই ইমপ্লিমেন্ট করতে পারেন। এই ফিচারটি বিভিন্ন উপাদানকে এক জায়গা থেকে অন্য জায়গায় ড্র্যাগ ও ড্রপ করার মাধ্যমে ব্যবস্থা নিয়ন্ত্রণ করতে সহায়তা করে।

Angular Material এর CDK Drag and Drop একটি সহজ এবং শক্তিশালী উপায় সরবরাহ করে যা ড্র্যাগ এবং ড্রপ কার্যকারিতা দ্রুত এবং কার্যকরভাবে অ্যাপ্লিকেশনে যুক্ত করতে পারে।

Angular CDK Drag and Drop ব্যবহারের জন্য প্রস্তুতি

১. MatDragAndDropModule ইমপোর্ট করা

প্রথমে আপনাকে @angular/cdk/drag-drop মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    DragDropModule
  ]
})
export class AppModule { }

এখানে DragDropModule ইনস্টল করা হয়েছে, যা ড্র্যাগ এবং ড্রপ কার্যকারিতার জন্য প্রয়োজনীয় সেবা সরবরাহ করে।

ড্র্যাগ এবং ড্রপ ইমপ্লিমেন্ট করা

২. HTML টেমপ্লেট তৈরি করা

এখন, HTML টেমপ্লেটে cdkDrag এবং cdkDrop ডিরেকটিভ ব্যবহার করে ড্র্যাগ এবং ড্রপ ফিচার প্রয়োগ করা যেতে পারে।

এটি একটি সিম্পল ড্র্যাগ এবং ড্রপ ডেমো:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div cdkDrag *ngFor="let item of items" class="example-box">
    {{item}}
  </div>
</div>

এখানে:

• cdkDropList: এটি একটি এলিমেন্ট যা ড্রপ টার্গেট হিসেবে কাজ করে।
• cdkDrag: এটি একটি এলিমেন্ট যা ড্র্যাগ করার উপাদান হিসেবে কাজ করে।
• (cdkDropListDropped): এই ইভেন্টটি ট্রিগার হয় যখন একটি উপাদান ড্র্যাগ করে এবং ড্রপ করা হয়।

৩. কম্পোনেন্ট ক্লাসে ড্র্যাগ এবং ড্রপ ফাংশন ইমপ্লিমেন্ট করা

এখন কম্পোনেন্ট ক্লাসে ড্র্যাগ এবং ড্রপ ফাংশনটি ইমপ্লিমেন্ট করতে হবে, যা ড্র্যাগড উপাদানকে পরিচালনা করবে।

import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop',
  templateUrl: './drag-drop.component.html',
  styleUrls: ['./drag-drop.component.css']
})
export class DragDropComponent {
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  drop(event: CdkDragDrop<string[]>) {
    const previousIndex = this.items.indexOf(event.item.data);
    const currentIndex = event.currentIndex;

    // List item reorder
    moveItemInArray(this.items, previousIndex, currentIndex);
  }
}

এখানে:

• CdkDragDrop: এটি ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডল করার জন্য ব্যবহৃত হয়।
• moveItemInArray: এটি একটি Angular CDK ইউটিলিটি ফাংশন যা একটি অ্যারের মধ্যে আইটেমকে পুনর্বিন্যাস করে।

৪. CSS স্টাইলিং

টেক্সট, বোতাম, বা অন্যান্য উপাদান গুলো স্টাইল করতে CSS ব্যবহার করা যেতে পারে। ড্র্যাগ এবং ড্রপ উপাদানের জন্য স্টাইল যুক্ত করতে:

.example-list {
  width: 200px;
  max-height: 400px;
  border: solid 1px #ccc;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.example-box {
  padding: 10px;
  margin: 5px;
  background-color: #e0e0e0;
  border-radius: 5px;
  cursor: move;
}

এখানে:

• example-list: এটি ড্রপ তালিকা এবং উপাদানগুলির জন্য স্টাইল।
• example-box: এটি ড্র্যাগgable আইটেমের জন্য স্টাইল।

লিস্ট অর্ডার কাস্টমাইজেশন

আপনি চাইলে ড্র্যাগ এবং ড্রপ অপারেশনের জন্য অর্ডার পরিবর্তন করতে পারেন এবং ফাংশনালিটি আরো উন্নত করতে পারেন। এর মাধ্যমে আপনি আইটেমগুলির অবস্থান পরিবর্তন করে ডেটা সংরক্ষণ বা অন্য কোনো কার্যকরী কাস্টমাইজেশন করতে পারেন।

উদাহরণ: আইটেম রিয়অর্ডার করা

এটি moveItemInArray ফাংশন দিয়ে করতে পারেন, যা উপাদানের অবস্থান পরিবর্তন করে:

import { moveItemInArray } from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

টেন্ডেম ড্র্যাগ এবং ড্রপ (Nested Drag and Drop)

আপনি Nested Drag and Drop প্রয়োগ করতে চাইলে, উপাদানগুলোর মধ্যে একাধিক স্তর তৈরি করতে পারেন। উদাহরণস্বরূপ:

<div cdkDropList [cdkDropListData]="items" class="list" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of items" cdkDrag>
    <div>{{item.name}}</div>
    <div cdkDropList [cdkDropListData]="item.children" (cdkDropListDropped)="drop($event)">
      <div *ngFor="let child of item.children" cdkDrag>{{child.name}}</div>
    </div>
  </div>
</div>

এখানে, একটি অভ্যন্তরীণ cdkDropList আছে যা আইটেমের মধ্যে nested ড্র্যাগ এবং ড্রপ অনুমোদন করে।

Angular Material এর Drag and Drop ফিচার একটি অত্যন্ত কার্যকরী টুল, যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও স্বতঃস্ফূর্ত ও উপযোগী করে তোলে। CDK Drag and Drop ব্যবহারের মাধ্যমে আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে ড্র্যাগ এবং ড্রপ কার্যকারিতা অত্যন্ত সহজভাবে বাস্তবায়ন করতে পারবেন। এটি লেজি লোডিং, নেস্টেড ড্র্যাগ, এবং ফ্লেক্সিবল ডেটা পরিচালনা সমর্থন করে, যা বড় অ্যাপ্লিকেশনগুলোতে পারফরম্যান্স উন্নত করতে সহায়তা করে।

Angular Material এর Drag and Drop ফিচার ব্যবহার করে আপনি সহজেই উপাদানগুলোকে এক স্থান থেকে অন্য স্থানে সরাতে (drag) এবং সঠিক স্থানে রাখার (drop) সুবিধা প্রদান করতে পারেন। এই ফিচারটি বিশেষ করে টেবিল, লিস্ট, বা ট্রি কম্পোনেন্টে ব্যবহার করা যেতে পারে যেখানে ব্যবহারকারীরা উপাদানগুলিকে নতুনভাবে সাজানোর বা পুনর্বিন্যাস করার প্রয়োজন অনুভব করেন।

এই টপিকটি ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং (reordering) করার পদ্ধতি সম্পর্কে ব্যাখ্যা করবে, যেখানে উপাদানগুলোর মধ্যে স্থানান্তর করা হবে এবং ডেটার স্থায়িত্ব বজায় রাখা হবে।

ড্র্যাগ এবং ড্রপ ব্যবহার করার জন্য প্রস্তুতি

প্রথমে Angular CDK এর DragDropModule মডিউলটি ইমপোর্ট করতে হবে।

১. মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে DragDropModule ইমপোর্ট করুন:

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    DragDropModule
  ]
})
export class AppModule { }

ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং করা

এখন আমরা Drag and Drop ফিচার ব্যবহার করে একটি লিস্ট তৈরি করবো যেখানে ব্যবহারকারী আইটেমগুলোকে ড্র্যাগ এবং ড্রপ করে রিসোর্ট (rearrange) করতে পারবেন।

২. HTML টেমপ্লেট

<div cdkDropList (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of items; let i = index" cdkDrag>
    <div class="list-item">
      {{item}}
    </div>
  </div>
</div>

এখানে:

• cdkDropList: এটি ড্র্যাগ এবং ড্রপের জন্য একটি কনটেইনার। এর মধ্যে এক বা একাধিক cdkDrag উপাদান থাকতে পারে।
• cdkDrag: এটি এমন একটি উপাদান যার মধ্যে ড্র্যাগ করতে সক্ষম।
• cdkDropListDropped: এটি একটি ইভেন্ট যা ড্র্যাগ এবং ড্রপ করার পর ট্রিগার হয় এবং ড্রপ করা উপাদান সম্পর্কে তথ্য প্রদান করে।

৩. টাইপস্ক্রিপ্ট কোড

এখন, drop() মেথড ব্যবহার করে আমরা ড্রপ করা আইটেমের অবস্থান পরিবর্তন করতে পারবো। ড্রপ ইভেন্টে ড্রপ করা আইটেমের ইনডেক্স এবং তার নতুন অবস্থান জানিয়ে ডেটার রিসোর্টিং করা হবে।

import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop-list',
  templateUrl: './drag-drop-list.component.html',
  styleUrls: ['./drag-drop-list.component.css']
})
export class DragDropListComponent {
  items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  drop(event: CdkDragDrop<string[]>) {
    const prevIndex = this.items.findIndex(item => item === event.item.data);
    const currentIndex = event.currentIndex;

    // রিসোর্টিং করা
    this.items.splice(prevIndex, 1); 
    this.items.splice(currentIndex, 0, event.item.data);
  }
}

এখানে:

• CdkDragDrop: এটি ইভেন্টের ধরন যা ড্র্যাগ এবং ড্রপ ঘটানোর পর উপাদান পরিবর্তন করে।
• drop(): এই ফাংশনটি ড্র্যাগ করা আইটেমের নতুন অবস্থান এবং আগের অবস্থান সনাক্ত করে এবং অ্যারে থেকে আইটেম সরিয়ে নতুন জায়গায় সেট করে।

৪. স্টাইলিং (CSS)

আপনি চাইলে cdkDropList এবং cdkDrag এর জন্য কাস্টম স্টাইল যোগ করতে পারেন। যেমন:

.list-item {
  padding: 10px;
  margin: 5px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  border-radius: 4px;
}

cdk-drop-list {
  width: 200px;
  max-height: 300px;
  overflow-y: auto;
}

এখানে:

• .list-item: প্রতিটি ড্র্যাগ আইটেমের জন্য স্টাইল দেয়া হয়েছে, যেমন প্যাডিং, মার্জিন, ব্যাকগ্রাউন্ড রঙ, ইত্যাদি।
• cdk-drop-list: ড্রপ লিস্টের জন্য নির্দিষ্ট পরিমাপ এবং স্ক্রলিং যোগ করা হয়েছে।

৫. রিসোর্টিং এবং অ্যানিমেশন

ড্র্যাগ এবং ড্রপের মাধ্যমে রিসোর্টিং আরো ইন্টারঅ্যাকটিভ এবং সুন্দর করার জন্য আপনি Angular animations ব্যবহার করতে পারেন। Angular CDK ড্র্যাগ-এন্ড-ড্রপ কম্পোনেন্টের সাথে অ্যানিমেশন যুক্ত করতে আপনি moveItemInArray ফাংশনটি ব্যবহার করতে পারেন।

import { moveItemInArray } from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

এখানে, moveItemInArray ফাংশনটি অ্যারের মধ্যে আইটেমগুলিকে নতুন অবস্থানে স্থানান্তর করতে সাহায্য করবে।

Angular CDK Drag and Drop ফিচার ব্যবহার করে আপনি সহজেই ড্র্যাগ এবং ড্রপ অপারেশন দিয়ে উপাদানগুলিকে রিসোর্ট (reorder) করতে পারবেন। এটি বিশেষ করে ডেটা টেবিল, লিস্ট এবং অন্য যেকোনো UI এলিমেন্টের জন্য উপযুক্ত, যেখানে ব্যবহারকারীরা উপাদানগুলিকে পুনর্বিন্যাস করতে চান। Angular CDK এর DragDropModule একটি শক্তিশালী এবং কাস্টমাইজেবল টুল যা আপনি আপনার অ্যাপ্লিকেশনে সহজেই প্রয়োগ করতে পারেন।